<template>
  <view>
    <!-- 搜索 -->
    <view class="search-box">
      <!-- <MySearch @click="goToSearch"></MySearch> -->
    </view>

    <!-- 轮播图区域 -->
    <!-- duration动画时长, interval隔几秒切换 -->
    <swiper
      class="top-swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
    >
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 分类导航区域 -->
    <view class="nav-list">
      <view
        class="nav-item"
        v-for="(item, index) in navList"
        :key="index"
        @click="clickHandler(item)"
      >
        <image :src="item.image_src" class="nav-img"></image>
      </view>
    </view>

    <!-- 楼层区域 -->
    <view class="floor-list">
      <!-- 楼层 item 项 -->
      <view
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <view
          class="item"
          v-for="(item, index) in 10"
          :key="index"
          @click="showModal"
        >
          <image
            style="width: 60rpx; height: 60rpx"
            src="https://img1.baidu.com/it/u=1862180176,3083925166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          >
            <view style="font-size: 26rpx; margin-top: -121rpx"
              >功能{{ index }}</view
            ></image
          >
        </view>
        <!-- <view v-for="(item,index) in 10" :key="index" style="position: relative; width: 170px; height: 89px;"> 
          <image src="https://img1.baidu.com/it/u=1862180176,3083925166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" width="60rpx" height="60rpx" alt=""> 
         <view style="position: absolute; bottom: 0; left: 0;">添加文字...添加文字...添加文字...</view> 
        </view> -->
      </view>
    </view>
    <Dailog
      zdTit="功能B"
      :zdTxt="zdTxt"
      :isSHow="isSHow"
      @colseBtn="colseBtn"
      @zdBtn="zdBtn"
    ></Dailog>
  </view>
</template>

<script>
import Dailog from './dailog.vue'
export default {
  components: {
    Dailog,
  },
  data() {
    return {
      // 存储轮播图数据
      swiperList: [{image_src:'https://imgs.699pic.com/01/400/064/846/400064846.jpg!list2x.v1'},
      {image_src:'https://imgs.699pic.com/01/400/064/846/400064846.jpg!list2x.v1'},
      {image_src:'https://imgs.699pic.com/01/400/064/846/400064846.jpg!list2x.v1'},
      {image_src:'https://imgs.699pic.com/01/400/064/846/400064846.jpg!list2x.v1'},
      {image_src:'https://imgs.699pic.com/01/400/064/846/400064846.jpg!list2x.v1'},],
      // 存储分类导航
      navList: [
        {
          name: '功能1',
          image_src:
            'https://static.botue.com/ugo/uploads/icon_index_nav_1@2x.png',
        },
        {
          name: '功能2',
          image_src:
            'https://static.botue.com/ugo/uploads/icon_index_nav_1@2x.png',
        },
        {
          name: '功能3',
          image_src:
            'https://static.botue.com/ugo/uploads/icon_index_nav_1@2x.png',
        },
        {
          name: '功能4',
          image_src:
            'https://static.botue.com/ugo/uploads/icon_index_nav_1@2x.png',
        },
        {
          name: '功能5',
          image_src:
            'https://static.botue.com/ugo/uploads/icon_index_nav_1@2x.png',
        },
      ],
      zdTxt: '',
      isSHow: false,
      // 存储楼层数据
      floorList: [],
    }
  },

  created() {},

  methods: {
    showModal() {
      this.isSHow = true
    },
    colseBtn() {
      this.isSHow = false
    },
    // 点击确定按钮
    zdBtn() {
      this.isSHow = false
    },
  },
}
</script>

<style lang="scss">
.top-swiper {
  height: 330rpx;

  .swiper-content,
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-list {
  display: flex;
  // background-color: #262b3a;
  justify-content: space-around;
  margin: 30rpx 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title {
  display: flex;
  width: 100%;
  height: 60rpx;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}

.search-box {
  // 开启粘性定位
  position: sticky;

  // 设置什么时候开始吸顶(固定定位)
  top: 0;

  // 提升层级
  z-index: 999;
}
.item {
  color: black;
  flex: 0 0 24%;
  height: 160rpx;
  width: 160rpx;
  text-align: center;
  line-height: 160rpx;
  background-color: white;
  /* 边距懒得算，css函数代替 */
  margin-right: calc(4% / 3);
  margin-bottom: calc(4% / 3);
}
/* 去除每行尾的多余边距 */
.item:nth-child(4n) {
  margin-right: 0;
}
/* 使最后一个元素的边距填满剩余空间 */
.item:last-child {
  margin-right: auto;
}
</style>
